import React, {memo} from "react";
import {connect} from "react-redux";
import * as actionTypes from '../../../pages/shopping/store/actionCreators'
import {Context} from './SecondaryContentStyle'
import Lazyload from 'react-lazyload'
import loading from '../../../assets/mainIconfont/loading.gif'

const SecondaryContent = (props) => {

  const {list} = props

  const {setAddCar, selectGoods} = props
  return (
    <Context>
      {list.map((item, index) => {
        // console.log(item.imgsrc);
        // console.log(item.id);
        return (
          <div className="card" key={item.id} onClick={setAddCar.bind(null, list[index], selectGoods)}>
            <div className="image">
              <Lazyload height={100} placeholder={
                // loading 优化
                <img alt="" width="100%" height="100%" src={loading}/>
              }>
                <img src={item.imgsrc} alt=""/>
              </Lazyload>
            </div>
            <div className="text">
              <div className="title">{item.name}</div>
              <div className="price">￥{item.price}</div>
            </div>
          </div>
        )
      })}
    </Context>
  )
}

const mapStateToPorps = (state) => {
  return {
    selectGoods: state.shopping.selectGoods
  }
}

const mapStateToDispatch = (dispatch) => {
  return {
    // 定义，onClick点击使用
    setAddCar(data, selectGoods) {
      if (selectGoods.findIndex((item) => data.id == item.id) == -1) {
        dispatch(actionTypes.getSelectGoods(data))
      } else {
        let index = selectGoods.findIndex((item) => data.id == item.id)
        dispatch(actionTypes.getSelectGoodsCount(data, index))
      }
    }
  }
}

export default connect(mapStateToPorps, mapStateToDispatch)(memo(SecondaryContent))
